<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>useradd</title>
    <link rel="stylesheet" href="../../layui.css">
    <style type="text/css">
        .button_list{
            float: left;
            left:40%;
        }
    </style>
</head>
<body>
<form class="layui-form layui-form-pane">
    <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>基础信息</legend>
        </fieldset>
    </div>
    <div class="layui-col-xs12 layui-col-sm1 layui-col-md1">
        <div>　　</div><!--这里面是空白字符-->
    </div>
    <div class="layui-col-xs12 layui-col-sm5 layui-col-md5">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-inline">
                <input type="text" placeholder="请输入用户名" autocomplete="off" class="layui-input" id="user_name" onblur="isNull(this.value,'p1')">
            </div>
            <p style="font-size: 80%;color: #FD482C" id="p1"></p>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">账号</label>
            <div class="layui-input-inline">
                <input type="text" placeholder="请输入账号" autocomplete="off" class="layui-input" id="login_name" onblur="isNull(this.value,'p2')">
            </div>
            <p style="font-size: 80%;color: #FD482C" id="p2"></p>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-inline">
                <select name="interest" lay-filter="aihao" id="sex">
                    <option value=""selected="" ></option>
                    <option value="1">男</option>
                    <option value="2">女</option>
                    <option value="0">尚未记录</option>
                </select>
            </div>
            <p style="font-size: 80%;color: #FD482C" id="p3"></p>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">手机号</label>
            <div class="layui-input-inline">
                <input type="text" placeholder="请输入手机号" autocomplete="off" class="layui-input" id="phone"onblur="isNull(this.value,'p4')">
            </div>
            <p style="font-size: 80%;color: #FD482C" id="p4"></p>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">邮箱</label>
            <div class="layui-input-inline">
                <input type="text"placeholder="请输入邮箱" autocomplete="off" class="layui-input" id="email" onblur="isNull(this.value,'p5')">
            </div>
            <p style="font-size: 80%;color: #FD482C" id="p5"></p>
        </div>
    </div>
    <div class="layui-col-xs12 layui-col-sm5 layui-col-md5">
        <div class="layui-form-item">
            <label class="layui-form-label">用户角色</label>
            <div class="layui-input-inline" id="role_list">
            </div>
            <p style="font-size: 80%;color: #FD482C" id="p6"></p>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">部门</label>
            <div class="layui-input-inline" id="dept_list">
            </div>
            <p style="font-size: 80%;color: #FD482C" id="p7"></p>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-inline">
                <input type="password" name="password" placeholder="请输入密码" autocomplete="off" class="layui-input" id="password_1" onkeyup="passwordVerifiers()" onblur="isNull(this.value,'p8')">
            </div>
            <p style="font-size: 80%;color: #FD482C" id="p8"></p>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">确认密码</label>
            <div class="layui-input-inline">
                <input type="password" name="password" placeholder="请输入密码" autocomplete="off" class="layui-input" id="password_2" onkeyup="passwordVerifiers()">
            </div>
            <p style="font-size: 80%;color: #FD482C" id="p9"></p>
        </div>
    </div>
    <div class="layui-col-xs12 layui-col-sm1 layui-col-md1">
        <div>　　</div><!--这里面也是空白字符-->
    </div>
    <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>其他信息</legend>
        </fieldset>
    </div>
    <div class="layui-col-xs12 layui-col-sm1 layui-col-md1">
        <div>　　</div><!--这里面还是空白字符-->
    </div>
    <div class="layui-col-xs12 layui-col-sm10 layui-col-md10">
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <textarea placeholder="请输入内容" class="layui-textarea" id="remark"></textarea>
            </div>
        </div>
    </div>
    <div class="layui-col-xs12 layui-col-sm1 layui-col-md1">
        <div>　　</div><!--这里面又是空白字符-->
    </div>
    <div class="layui-col-xs12 layui-col-sm12 layui-col-md12 button_list " id="button">
        <button type="button" class="layui-btn layui-btn-radius" onclick="add()">提交</button>
        <button type="button" class="layui-btn layui-btn-warm layui-btn-radius">重置</button>
    </div>
</form>


<script src="../../layer/layer.js"></script>
<script src="../../layui/layui.js"></script>
<script src="../../jquery-3.4.1.js"></script>
<script>

    function isNull(str,id){
        if (str == ""){
            document.getElementById(id).innerHTML = "必填项不可为空";
            return false;
        }else {
            document.getElementById(id).innerHTML = "";
        }
    }
    layui.use('form', function(){
        var form = layui.form;
        form.render();
    });
    window.onload = function () {
        var role = "<select name=\"interest\" lay-filter=\"aihao\" id='role_selection' id='role'><option value=\"\"selected=\"\"></option>";
        var dept = "<select name=\"interest\" lay-filter=\"aihao\" id='dept_selection' id='dept'><option value=\"\"selected=\"\"></option>";
        $.ajax({
            type:"get",
            url:"/user/roleList",
            success:function (f) {
                if (f.code == 0){
                    var obj = f.data.role;
                    for (let i = 0; i < obj.length; i++) {
                        role=role+"<option value='"+obj[i].roleId+"'>"+obj[i].roleName+"</option>";
                    }
                    document.getElementById("role_list").innerHTML = role+"</select>"
                    obj = f.data.dept;
                    for (let i = 0; i < obj.length; i++) {
                        dept=dept+"<option value='"+obj[i].id+"'>"+obj[i].deptName+"</option>";
                    }
                    document.getElementById("dept_list").innerHTML = dept+"</select>"
                    layui.use('form', function(){
                        var form = layui.form;
                        form.render();
                    });
                }
            }
        })
    }

    function add() {
        layer.confirm('确定添加此用户？', {
            btn: ['确定','取消']
        }, function(){
            var password1 = document.getElementById("password_1").value;
            var password2 = document.getElementById("password_2").value;
            if (password1 != password2){
                layer.msg("密码不一致");
                return false;
            }
            var userName = document.getElementById("user_name").value;
            if (userName == ""){
                document.getElementById('p1').innerHTML = "必填项不可为空";
                layer.msg('必填项不可为空', {
                    time: 1000,
                });
                return false;
            }
            var loginName = document.getElementById("login_name").value;
            if (loginName == ""){
                document.getElementById('p2').innerHTML = "必填项不可为空";
                layer.msg('必填项不可为空', {
                    time: 1000,
                });
                return false;
            }
            var sex = document.getElementById("sex").value;
            if (sex == ""){
                document.getElementById('p3').innerHTML = "必填项不可为空";
                layer.msg('必填项不可为空', {
                    time: 1000,
                });
                return false;
            }else {
                document.getElementById('p3').innerHTML = "";
            }
            var phone = document.getElementById("phone").value;
            if (phone == ""){
                document.getElementById('p4').innerHTML = "必填项不可为空";
                layer.msg('必填项不可为空', {
                    time: 1000,
                });
                return false;
            }
            var email = document.getElementById("email").value;
            if (email == ""){
                document.getElementById('p5').innerHTML = "必填项不可为空";
                layer.msg('必填项不可为空', {
                    time: 1000,
                });
                return false;
            }
            var role = document.getElementById("role_selection").value;
            if (role == ""){
                document.getElementById('p6').innerHTML = "必填项不可为空";
                layer.msg('必填项不可为空', {
                    time: 1000,
                });
                return false;
            }else {
                document.getElementById('p6').innerHTML = "";
            }
            var dept = document.getElementById("dept_selection").value;
            if (dept == ""){
                document.getElementById('p7').innerHTML = "必填项不可为空";
                layer.msg('必填项不可为空', {
                    time: 1000,
                });
                return false;
            }else {
                document.getElementById('p7').innerHTML = "";
            }
            if (password1 == ""){
                document.getElementById('p8').innerHTML = "必填项不可为空";
                layer.msg('必填项不可为空', {
                    time: 1000,
                });
                return false;
            }
            var remark = document.getElementById("remark").value;
            layer.msg(userName+loginName+sex+phone+email+role+dept+remark);
            $.ajax({
                type:"get",
                url:"/user/insert",
                data:{
                    "userName":userName,
                    "loginName":loginName,
                    "password":password1,
                    "sex":sex,
                    "phone":phone,
                    "email":email,
                    "dept":dept,
                    "remark":remark,
                    "roleId":role
                },
                success:function (f) {
                    if (f.code == 0){
                        layer.msg(f.msg, {
                            time: 1000,
                        });
                    }else {
                        layer.msg(f.msg, {
                            time: 1000,
                        });
                    }
                }
            })
        }, function(){
            layer.msg('已取消', {
                time: 1000,
            });
        });
    }

    function passwordVerifiers() {
        var password1 = document.getElementById("password_1").value;
        var password2 = document.getElementById("password_2").value;
        if (password1 != password2){
            document.getElementById("p9").innerHTML = "密码不一致";
            return false;
        }else {
            document.getElementById("p9").innerHTML = "";
            return false;
        }
    }
</script>
</body>
</html>